<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css"/>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/voyage.js"></script>

<script>
var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true
  });

  var coords = new google.maps.MVCArray();
  for (var i = 0; i < data.length; i++) {
    coords.push(new google.maps.LatLng(data[i].lat, data[i].lng));
  }

  var symbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };

  var line = new google.maps.Polyline({
    path: coords,
    strokeWeight: 1,
    strokeOpacity: .3,
    icons: [{
      icon: symbol,
      offset: '10px',
      repeat: '2%' // '100px'
     }],
    map: map
  });
}
</script>

</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>
